<template>
  <!--弹出层 -->
  <div class="Transfer">
    <ElForm>
      <ElRow style="display: flex; justify-content: space-around">
        <ElCol :span="10" style="border: 1px solid #ebeef5">
          <span
            style="
              display: block;
              font-size: 16px;
              text-align: center;
              padding: 10px;
              border-bottom: 1px solid #ebeef5;
              margin-bottom: 10px;
            "
            >可见待选中巡检点清单</span
          >
          <Search
            :schema="allSchemas.searchSchema"
            @search="setSearchParams"
            @reset="setSearchParams"
          />
          <Table
            v-model:pageSize="pageSize"
            v-model:currentPage="currentPage"
            :columns="allSchemas.tableColumns"
            :data="dataList"
            row-key="uuid"
            :loading="loading"
            :pagination="{
              total: total,
              pageSize: pageSize
            }"
            @selection-change="checkAll"
            @register="tableRegister"
          />
        </ElCol>
        <ElCol :span="2" style="display: flex; flex-direction: column; justify-content: center">
          <BaseButton
            :disabled="nowSelectData.length ? false : true"
            type="primary"
            @click="handelSelect"
          >
            <Icon icon="ep:arrow-right"
          /></BaseButton>
          <BaseButton
            :disabled="nowSelectRightData.length ? false : true"
            type="primary"
            style="margin-top: 10px; margin-left: 0px"
            @click="handleRemoveSelect"
          >
            <Icon icon="ep:arrow-left"
          /></BaseButton>
        </ElCol>
        <ElCol :span="10" style="border: 1px solid #ebeef5">
          <span
            style="
              display: block;
              font-size: 16px;
              text-align: center;
              padding: 10px;
              border-bottom: 1px solid #ebeef5;
              margin-bottom: 10px;
            "
            >可见已选中巡检点清单</span
          >
          <ElTable
            :data="selectArr"
            border
            ref="selection"
            @selection-change="checkRightAll"
            style="width: 100%; font-size: 12px"
          >
            <ElTableColumn type="selection" width="50" />
            <ElTableColumn prop="facName" label="巡检点名称" />
            <ElTableColumn prop="qrCode" label="二维码" />
            <ElTableColumn prop="faciId" label="类型" />
          </ElTable>
        </ElCol>
      </ElRow>
    </ElForm>
  </div>
</template>
<script setup lang="tsx">
import { PropType, reactive, ref, unref } from 'vue'
import { ElForm, ElRow, ElCol, ElTable, ElTableColumn } from 'element-plus'
import { Search } from '@/components/Search'
import { useTable } from '@/hooks/web/useTable'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { Icon } from '@/components/Icon'
import { Table } from '@/components/Table'
import PlanGroupApi from '@/api/linePatrol/PlanGroupApi'
import { useEquipStore } from '@/store/modules/equip'
const EquipStore = useEquipStore()
if (
  EquipStore.getFacilityTypeTree.length == 0 ||
  EquipStore.getFacilityTypeTree.length == undefined
) {
  EquipStore.setFacilityTypeTree()
}
const props = defineProps({
  taskId: {
    type: Number as PropType<number>,
    default: () => null
  }
})
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const i = await PlanGroupApi.getTaskIdNotList({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      taskId: props.taskId
    })
    return {
      list: i.rows,
      total: i.total
    }
  },
  fetchDelApi: async () => {
    return true
  }
})

const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods
const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'selection',
    table: {
      type: 'selection'
    },
    search: {
      hidden: true
    }
  },
  {
    field: 'index',
    label: '序号',
    type: 'index',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    }
  },
  {
    field: 'facName',
    label: '任务名称',
    search: {
      hidden: false,
      component: 'Input',
      componentProps: {
        placeholder: '任务名称'
      }
    }
  },
  {
    field: 'qrCode',
    label: '二维码',
    search: {
      hidden: true
    }
  },
  {
    field: 'faciId',
    width: 100,
    label: '类型',
    //     formatter: (_: Recordable, __: any, cellValue: string) => {
    //             return EquipStore.getFacilityTypeTree.map((item) => {
    //               if (item.dictValue == cellValue) {

    //               }
    //             });
    // },
    search: {
      hidden: false,
      component: 'TreeSelect',
      colProps: {
        span: 8
      },
      componentProps: {
        placeholder: '类型',
        data: EquipStore.getFacilityTypeTree,
        renderAfterExpand: false,
        nodeKey: 'id',
        props: {
          label: 'label'
        }
      }
    }
  }
])
const searchParams = ref({})
const { allSchemas } = useCrudSchemas(crudSchemas)
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}
const selectArr = ref<any>([]) // 右边列表

const nowSelectData = ref([]) // 左边选中列表数据
const nowSelectRightData = ref([]) // 右边选中列表数据
function checkAll(val) {
  nowSelectData.value = val
}
function checkRightAll(val) {
  nowSelectRightData.value = val
}
function handleRemoveTabList(isNeedArr, originalArr) {
  if (isNeedArr.length && originalArr.length) {
    for (let i = 0; i < isNeedArr.length; i++) {
      for (let k = 0; k < originalArr.length; k++) {
        if (isNeedArr[i]['uuid'] === originalArr[k]['uuid']) {
          originalArr.splice(k, 1)
        }
      }
    }
  }
}
function handelSelect() {
  selectArr.value = handleConcatArr(selectArr.value, nowSelectData.value)
  handleRemoveTabList(nowSelectData.value, dataList.value)
  nowSelectData.value = []
}
// 取消
function handleRemoveSelect() {
  dataList.value = handleConcatArr(dataList.value, nowSelectRightData.value)
  handleRemoveTabList(nowSelectRightData.value, selectArr.value)
  nowSelectRightData.value = []
}
function handleConcatArr(selectArr, nowSelectData) {
  let arr = []
  arr = arr.concat(selectArr, nowSelectData)
  return arr
}
const submit = () => {
  return selectArr
}
defineExpose({
  submit
})
</script>
<style scoped>
:deep(.el-pagination > .is-last) {
  display: none !important;
}
:deep(.el-table--default .el-table__cell) {
  padding: 4px 0 !important;
}
.Transfer :deep(.el-form-item__label) {
  display: none !important;
}
</style>
@/api/linePatrol/PlanGroupApi
